<template>
  <div class="wrapper" ref="toolbar" @mousedown="dragDown">
    <div class="toolbar">
      <div class="wrap">
        <div
          class="toolItem"
          :class="{ selected: index == selectedToolIndex }"
          @click="clickTool(index)"
          @mousedown.stop=""
          v-for="(tool, index) in toolList"
          :key="tool.name"
        >
          <img :src="tool.icon" />
        </div>
      </div>
    </div>
    <div class="toolOption" v-show="selectedToolIndex > 0" @mousedown.stop="">
      <div class="arrow" :style="{ left: arrowLeft }"></div>
      <div class="toolSize" v-show="toolList[selectedToolIndex].type == 2">
        <div
          class="sizeItem"
          :class="{ selected: selectedSizeIndex == sizeIndex }"
          v-for="(size, sizeIndex) in sizeList"
          :key="size.name"
          @click="selectedSizeIndex = sizeIndex"
        >
          {{ size.name }}
        </div>
      </div>
      <div class="toolBrush" v-show="toolList[selectedToolIndex].type == 1">
        <div
          class="brushItem"
          v-for="(size, sizeIndex) in sizeList"
          :key="size.name"
          @click="selectedSizeIndex = sizeIndex"
        >
          <div
            class="brushRound"
            :class="{ selected: selectedSizeIndex == sizeIndex }"
            :style="{
              width: 6 + sizeIndex * 4 + 'px',
              height: 6 + sizeIndex * 4 + 'px',
            }"
          ></div>
        </div>
      </div>
      <div class="toolColor">
        <div
          class="colorItem"
          :class="{ selected: selectedColorIndex == colorIndex }"
          @click="selectedColorIndex = colorIndex"
          v-for="(color, colorIndex) in colorList"
          :style="{ background: color.color }"
          :key="color.color"
        ></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Palette",
  computed: {
    arrowLeft: function () {
      return this.selectedToolIndex > 0
        ? 40 + this.selectedToolIndex * 48 + "px"
        : "0px";
    },
  },
  data() {
    return {
      selectedToolIndex: 3,
      selectedSizeIndex: 0,
      selectedColorIndex: 0,
      toolList: [
        {
          name: "回滚",
          icon: require("@/assets/images/ico-revert.png"),
          method: this.revert,
          type: 0,
        },
        {
          name: "圆形",
          label:'round',
          icon: require("@/assets/images/ico-round.png"),
          method: this.drawRound,
          type: 1,
        },
        {
          name: "矩形",
          label:'rect',
          icon: require("@/assets/images/ico-rect.png"),
          method: this.drawRect,
          type: 1,
        },
        {
          name: "云",
          label:'cloud',
          icon: require("@/assets/images/ico-cloud.png"),
          method: this.drawCloud,
          type: 1,
        },
        {
          name: "箭头",
          label:'arrow',
          icon: require("@/assets/images/ico-arrow.png"),
          method: this.drawArrow,
          type: 1,
        },
        {
          name: "文字",
          label:'text',
          icon: require("@/assets/images/ico-text.png"),
          method: this.drawText,
          type: 2,
        },
        {
          name: "清除",
          method: this.clear,
          icon: require("@/assets/images/ico-clear.png"),
        },
      ],
      sizeList: [
        {
          name: "小",
          size: 6,
        },
        {
          name: "中",
          size: 10,
        },
        {
          name: "大",
          size: 14,
        },
      ],
      colorList: [
        {
          color: "#FF1814",
        },
        {
          color: "#EEFF00",
        },
        {
          color: "#3CFFF7",
        },
        {
          color: "#507DFF",
        },
        {
          color: "#15D04E",
        },
        {
          color: "#606060",
        },
        {
          color: "#FFFFFF",
        },
      ],
    };
  },
  methods: {
    dragDown(e) {
      let vm = this;
      let el = this.$refs.toolbar;
      this._drag_el = el;
      //按下元素后，计算当前鼠标与对象计算后的坐标
      this._oldLeft = this._drag_el.style.left;
      this._oldTop = this._drag_el.style.top;
      this._x = e.clientX;
      this._y = e.clientY;
      this._maxLeft = document.body.clientWidth - this._drag_el.offsetWidth;
      this._maxTop = document.body.clientHeight - this._drag_el.offsetHeight;

      //在支持 setCapture 做些东东

      el.setCapture //捕捉焦点
        ? (el.setCapture(),
          //设置事件
          (el.onmousemove = (ev) => {
            vm.dragMove(ev || event);
          }),
          (el.onmouseup = vm.dragUp))
        : //绑定事件
          (document.addEventListener("mousemove", vm.dragMove),
          document.addEventListener("mouseup", vm.dragUp));
      //防止默认事件发生
      e.preventDefault();
    },
    dragMove(e) {
      let oldLeftPx = parseInt(
        this._oldLeft
          ? this._oldLeft.substring(0, this._oldLeft.indexOf("px"))
          : 0
      );
      let oldTopPx = parseInt(
        this._oldTop ? this._oldTop.substring(0, this._oldTop.indexOf("px")) : 0
      );
      //限制移动范围
      let newLeft = oldLeftPx + (e.clientX - this._x);
      let newTop = oldTopPx + (e.clientY - this._y);
      if (newLeft < 0) {
        newLeft = 0;
      } else if (newLeft > this._maxLeft) {
        newLeft = this._maxLeft;
      }
      if (newTop < 0) {
        newTop = 0;
      } else if (newTop > this._maxTop) {
        newTop = this._maxTop;
      }
      this._drag_el.style.left = newLeft + "px";
      this._drag_el.style.top = newTop + "px";
    },
    dragUp(e) {
      let el = this.$refs.toolbar;
      let vm = this;
      el.releaseCapture
        ? //释放焦点
          (el.releaseCapture(),
          //移除事件
          (el.onmousemove = el.onmouseup = null))
        : //卸载事件
          (document.removeEventListener("mousemove", vm.dragMove),
          document.removeEventListener("mouseup", vm.dragUp));
    },
    clickTool(index) {
      let toolItem = this.toolList[index];
      if (toolItem.type > 0) {
        this.selectedToolIndex = index;
      }
      toolItem.method();
    },
    getBrushProp() {
      return {
        tool:
          this.selectedToolIndex >= 0
            ? this.toolList[this.selectedToolIndex]
            : null,
        size: this.sizeList[this.selectedSizeIndex],
        color: this.colorList[this.selectedColorIndex],
      };
    },
    revert() {
      this.$emit("revert")
    },
    drawRound() {
      console.log("drawRound :>> ");
    },
    drawRect() {},
    drawCloud() {},
    drawArrow() {},
    drawText() {},
    clear() {
      this.$emit("clear")
    },
  },
};
</script>

<style lang="less" scoped>
.wrapper {
  position: absolute;
  z-index: 2001;
}
.toolbar {
  background: rgba(15, 19, 30, 0.8);
  box-shadow: 0rem 0rem 1rem rgba(0, 0, 0, 0.5);
  border-radius: 3rem;
  color: white;
  font-size: 1rem;
  padding: 0.25rem 1.75rem;
  user-select: none;
  cursor: move;
  .wrap {
    display: flex;
    align-items: center;
    .toolItem {
      width: 3rem;
      height: 3rem;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      &.selected,
      &:hover {
        background: #0f131e;
      }
      img {
        height: 80%;
        width: 80%;
      }
    }
  }
}
.toolOption {
  display: flex;
  background: rgba(15, 19, 30, 0.8);
  box-shadow: 0rem 0rem 1rem rgba(0, 0, 0, 0.5);
  border-radius: 1rem;
  color: white;
  padding: 0.5rem 1.67rem;
  margin-top: 1.5rem;
  position: relative;
  .arrow {
    position: absolute;
    width: 0;
    height: 0;
    top: -1rem;
    border-left: 0.8rem solid transparent;
    border-right: 0.8rem solid transparent;
    border-bottom: 1rem solid rgba(15, 19, 30, 0.8);
  }
  .toolSize {
    display: flex;
    background: rgba(59, 118, 255, 0.2);
    border: 1px solid #4672ff;
    border-radius: 0.4rem;
    .sizeItem {
      padding: 0.4rem 0.58rem;
      cursor: pointer;
      &.selected {
        background: #507dff;
      }
    }
  }
  .toolBrush {
    display: flex;
    align-items: center;
    .brushItem {
      width: 2.25rem;
      height: 2.25rem;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      .brushRound {
        background: white;
        border-radius: 50%;
        &.selected {
          background: #507dff;
        }
      }
    }
  }
  .toolColor {
    display: flex;
    align-items: center;
    margin-left: 1.25rem;
    cursor: pointer;
    .colorItem {
      width: 1.5rem;
      height: 1.5rem;
      margin-right: 0.5rem;
      box-sizing: border-box;
      &.selected {
        border: 2px solid #c0c0c0;
      }
    }
  }
}
</style>